import $ from 'jquery';
//这个写法是只读的
//import BpmnModeler from 'bpmn-js';
//这个写法是可编辑的
import BpmnModeler from 'bpmn-js/lib/Modeler';
import testDiagram from './diagram.bpmn';
import propertiesPanelModule from 'bpmn-js-properties-panel';
import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda';

var viewer = new BpmnModeler({
  container: '#js-canvas',
	//添加控制板
	propertiesPanel: {
		parent: '#js-properties-panel'
	},
	additionalModules: [
		propertiesPanelModule,
		// 左边工具栏以及节点
		propertiesProviderModule
	]
});

function event1(){
	//添加、删除、移动等事件
	const events = ['shape.added', 'shape.move.end', 'shape.removed', 'connect.end', 'connect.move'];
	events.forEach(function(event) {
		viewer.on(event, e => {
			console.log(event, e)
			//获取元素注册器
			var elementRegistry = viewer.get('elementRegistry')
			//e.element没有值说明是连线
			var shape = e.element ? elementRegistry.get(e.element.id) : e.shape
			console.log(shape)
			
			
			const modeling = viewer.get('modeling');
			if (shape.type == 'bpmn:Task'){
				modeling.updateProperties(shape, {
						name: '我是Task'
				})
			}
		})
	})
}

function event2(){
	const eventBus = viewer.get('eventBus') // 需要使用eventBus
	const eventTypes = ['element.click', 'element.changed'] // 需要监听的事件集合
	eventTypes.forEach(function(eventType) {
		eventBus.on(eventType, function(e) {
			//排除根节点元素，也就是画布
			if (!e || e.element.type == 'bpmn:Process') return;
			console.log(e)
		})
	})
}

viewer.importXML(testDiagram, function(err) {
  if (!err) {
    console.log('success!');
    viewer.get('canvas').zoom('fit-viewport');
		//event1();
		//event2();
		//updateProcessName();
		//readTaskProperties();
		addModelerListener ()
  } else {
    console.log('something went wrong:', err);
  }
});

//修改属性的值
function updateProcessName(){
	debugger;
	const modeling = viewer.get('modeling')
	var elementRegistry = viewer.get('elementRegistry');
	var all = elementRegistry.getAll();
	for(var i=0 ; i<all.length ; i++){
		var shape = all[i];
		if (shape.type == 'bpmn:Process'){
			modeling.updateProperties(shape, {
					name: '我是修改后的process名称'
			})
		}
		if (shape.type == 'bpmn:Task'){
			modeling.updateProperties(shape, {
					name: '我是Task'
			})
		}
	}
		
}

//读取task节点属性的值
function readTaskProperties(){
	debugger;
	const modeling = viewer.get('modeling')
	var elementRegistry = viewer.get('elementRegistry');
	var all = elementRegistry.getAll();
	for(var i=0 ; i<all.length ; i++){
		//if (shape.type == 'bpmn:Task'){
			var shape = all[i];
			var o = shape.businessObject;
			console.log(o)
		//}
	}
}

function addModelerListener () {
	debugger;
            const eventBus = viewer.get('eventBus')
        const modeling = viewer.get('modeling')
        const elementRegistry = viewer.get('elementRegistry');
        const eventTypes = ['element.click', 'element.changed'];
        eventTypes.forEach(function(eventType) {
            eventBus.on(eventType, function (e) {
                if (!e || !e.element) {
                  console.log('无效的e', e)
                  return
                }
                if (eventType === 'element.click') {
                  console.log('点击了element', e)
                  var shape = e.element ? elementRegistry.get(e.element.id) : e.shape
                  if (shape.type === 'bpmn:Task') {
                    modeling.updateProperties(shape, {
                        name: '我是修改后的Task名称'
                    })
                  }
                }
            })
        })
    }